<template>
    <view class="content">
        <view class="msg-list">

            <view v-for="(item, index) in list" :key="index" @click="showList(item)" class="item">
                <view class="icon-box" v-if="item.msgType==1">
                    <image class="img" src="../../static/images/icon_cust_white.png" mode="aspectFill"></image>
                </view>
                <view class="icon-box" v-if="item.msgType!=1">
                    <image class="img" src="../../static/images/icon_task.png" mode="aspectFill"></image>
                </view>
                <view class="info" v-if="item.total>0">
                    <view class="title-box">
                        <text class="title">
                            {{utils.getDictLabelName("msgType",item.msgType)}}
                        </text>
                        <text class="time">{{item.createTime}}</text>
                    </view>
                    <view class="cont-box">
                        <view class="text ellipsis">{{item.msg}}</view>
                        <view class="read">{{item.total}}</view>
                    </view>
                </view>
                <view class="info" v-if="item.total==0">
                    <view class="title-box">
                        <text class="title">
                            {{utils.getDictLabelName("msgType",item.msgType)}}
                        </text>
                    </view>
                    <view class="cont-box">
                        <view class="text ellipsis">暂无消息</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import api from '@/api/api.js';
    export default {
        data() {
            return {
                list: []
            }
        },
        onLoad() {
            // 修改顶部导航背景色
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#39b54a',
                animation: {
                    duration: 400,
                    timingFunc: 'easeIn'
                }
            })
        },
        onShow() {
            this.getMsg()
            this.getmsgCount();
            if (this.getS('token')) {
                api.getResMsgCount().then(r => {
                    console.log('未读消息', r);
                    if (r.counts - 0 <= 0) return
                    uni.setTabBarBadge({
                        index: 2,
                        text: r.counts + ''
                    })
                })
            }
        },
        methods: {
            getmsgCount() {
                api.getMsgCount(null).then(
                    res => {
                        if (res.code == 200) {
                            if (res.counts == 0) {
                                uni.removeTabBarBadge({
                                    index: 2
                                })
                            } else {
                                uni.setTabBarBadge({
                                    index: 2,
                                    text: res.counts.toString()
                                })
                            }


                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: "请求失败",
                            });
                        }
                    },
                    rej => {}
                );

            },
            getMsg() {
                var data = {};
                var that = this;
                api.getMsg(data).then(
                    res => {
                        if (res.code == 200) {
                            that.list = res.data;

                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: "请求失败",
                            });
                        }
                    },
                    rej => {}
                );
            },
            // 查看消息
            showList(item) {
                uni.navigateTo({
                    url: './list?msgType=' + item.msgType
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .msg-list {
        background: #fff;

        .item {
            border-bottom: 1px solid #f7f7f7;
            padding: 20upx 30upx;
            display: flex;
            align-items: center;

            &:last-child {
                border-bottom: none;
            }

            .icon-box {
                width: 90upx;
                height: 90upx;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #39b54a;
                margin-right: 20upx;
                flex-shrink: 0;

                .img {
                    width: 60upx;
                    height: 60upx;
                }
            }

            .info {
                width: calc(100% - 110upx);
                height: 90upx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .title-box {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .title {
                        font-size: 30upx;
                        color: #333;
                    }

                    .time {
                        font-size: 24upx;
                        color: #999;
                    }
                }

                .cont-box {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .text {
                        max-width: 90%;
                        font-size: 24upx;
                        color: #666;
                    }

                    .read {
                        min-width: 40upx;
                        min-height: 40upx;
                        line-height: 40upx;
                        text-align: center;
                        font-size: 24upx;
                        color: #fff;
                        background: #F56C6C;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
</style>